<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/aui.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/init.js"></script>
    <title>找回密码</title>
    <style>
        body{
            background: url("img/login_bg.jpg") center top;
            background-size: cover;
        }
    </style>
</head>
<body class="flex">


<ul class="col-8 auto bg-white-5 border-radius-1 pad-3">
    <li class="mar-b-2 ">
        <p class="bold pad-b-1">*会员编号</p>
        <input id="account" class="col-10 bg-white border-radius-1 pad-2" type="text" placeholder="请输入会员编号">
    </li>
    <li class="mar-b-2 re">
        <p class="bold pad-b-1">*密保问题</p>
        <div id="ques" class="bg-white border-radius-1 pad-2">
            <span id="questxt" class="inline-block col-9" data-id="1">您的出生地？</span>
            <span class="arrow3"></span>
        </div>

        <ul id="quesbox" class="ab col-10 bg-white pad-1-2 border-radius-1 line-h-2 border-gray none" >
            <li data-id="1">您的出生地？</li>
            <li data-id="2">您的生日？</li>
            <li data-id="3">您的老家？</li>
        </ul>
    </li>
    <li class="mar-b-3 ">
        <p class="bold pad-b-1">*密保答案</p>
        <input id="answer" class="col-10 bg-white border-radius-1 pad-2" type="text" placeholder="请输入密保答案">
    </li>

    <li class="mar-b-2 flex color-white flex-x-c">
        <span class="pad-1-2 bg-blue border-radius-1 mar-r-3" onclick="findPwd()">找回密码</span>
        <a href="login.html" class="pad-1-2 bg-yellow border-radius-1 color-white">返回登录</a>
    </li>
</ul>

<!--密码弹窗-->
<div class="mask none"></div>
<div id="notice" class="mask-box bg-white border-radius-1 hidden none">
    <p class="bg-blue pad-2 right">
        <span class="fl color-white">提示信息</span>
        <span class="close"> </span>
    </p>
    <div class="pad-3">
        <div class="pad-3 bg-gray-l flex">
            <span class="radio active mar-r-3"></span>
            <div class="f1">
                您的一级密码是：<span id="pwd_1"></span>,
                二级密码是：<span id="pwd_2"></span>
            </div>

        </div>
    </div>
</div>

</div>

<script>
    // 选择密保问题
    var type = 1;
    $("#ques").click(function () {
        $("#quesbox").show();
    });
    $("#quesbox li").click(function () {
        var text = $(this).text();
        $("#questxt").text(text);  //密保问题赋值
        $("#quesbox").hide();
        // $("#questxt").attr('data-id',$(this).attr('data-id'));
        //设置密保问题类型
        type = $(this).attr('data-id');
    });


    function findPwd() {
        var account = $("#account").val();
        var answer = $("#answer").val();
        if(!account || !answer){
            toast('请填写完整信息');
            return;
        }
        var data = {};
        data.account = account;
        type == 1?data.encrypted1=answer:type == 2?data.encrypted2=answer:type == 3?data.encrypted3=answer:'';
        new AjaxRequest({
            type: 'post',
            dataType: 'json',
            url: hostUrl + 'index/Login/getpassword',
            data: data,
            callback: res => {
                if(res.status == 1){
                    $("#pwd_1").text(res.data.password);
                    $("#pwd_2").text(res.data.password_2);
                    $(".mask").show();
                    $("#notice").show();
                }else {
                    toast(res.msg);
                }
            }
        })
    }
</script>

</body>
</html>